<template>
    <!-- Login -->
    <div id="login">
        <div id="login-form">
            <h1>登陆界面</h1>
            <el-form :model="formData" :rules="rules" ref="formData" label-width="100px" class="demo-formData">
                <el-form-item label="账户" prop="user">
                    <el-input v-model="formData.user"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="pass">
                    <el-input v-model="formData.pass"></el-input>
                </el-form-item>
                <el-form-item class="btn">
                    <el-button type="primary" @click="submitForm('formData')">登录</el-button>
                    <el-button @click="$router.push({ name: 'sign' })">注册</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
  
<script>
import comm from "@/mixins/comm.js";
export default {
    mixins: [comm],
    data() {
        var checkuser = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('账户不能为空'));
            }
            callback()
        };
        var validatePass = (rule, value, callback) => {
            if (!value) {
                callback(new Error('请输入密码'));
            }
            callback()
        };
        return {
            formData: {
                pass: '',
                user: ''
            },
            rules: {
                pass: [
                    { validator: validatePass, trigger: 'blur' }
                ],
                user: [
                    { validator: checkuser, trigger: 'blur' }
                ]
            }
        };
    },
    created() {
        let { username, password } = JSON.parse(localStorage.getItem("kbk_user")) || {}
        this.formData.user = username || ""
        this.formData.pass = password || ""
    },
    methods: {
        async submitForm(formName) {
            console.log(await this.$refs[formName].validate())
            
            this.$refs[formName].validate(async(valid) => {
                if (valid) {
                    let {pass,user} = this.formData
                    let data = {
                        username: user,
                        password: pass
                    }
                    let res = await this.$awaitApi("login", data)
                    console.log(res)
                    if(res.err) return
                    if (res) {
                        localStorage.setItem("kbk_user", JSON.stringify(data))
                        localStorage.setItem("kbk_token", res.data.token)
                        this.$router.push({ name: "details" })
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    }
}
</script>
<style lang="less">
#login {
    .el-form-item {
    display: flex;
    justify-content: space-around;
    .el-form-item__label {
        width: auto !important;
    }
    .el-form-item__content {
        margin-left: 0 !important;
    }
}
.btn {
    .el-form-item__content {
        display: flex;
        flex-direction: column;
        .el-button {
            width: 140px;
            margin-bottom: 20px;
            margin-left: 0;
        }
    }
}
}

</style>
<style lang="less" scoped>
#login {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
  // 背景图片样式
  background-image: url("../assets/bgcolor.png");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

#login-form {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50vw;
  min-width: 300px;
  max-width: 400px;
  text-align: center;
  display: flex;
  flex-direction: column;
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 15px;
  color: #fff;
  // 表单 box-shadow 样式 好看
  box-shadow: 0 15px 25px rgba(0, 0, 0, .5);
}
// 浏览器兼容 , 针对谷歌浏览器 默认设置的 奇怪样式

</style>
  